<template>
  <div style="margin:30px">
    <el-button type="primary"
               plain
               @click="showCreateFrom()">新建优惠券</el-button>
    <el-dialog title="新建优惠券"
               :visible.sync="centerDialogVisible"
               width="30%"
               center>
      <el-form ref="form"
               :model="form"
               label-width="120px">
        <el-form-item label="优惠券名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="折扣幅度">
          <el-input-number v-model="form.rate"
                           :min="1"
                           :max="10"
                           label="描述文字"></el-input-number>
        </el-form-item>

        <el-form-item label="数量">
          <el-input-number v-model="form.number"
                           :min="1"
                           :max="10000"
                           label="描述文字"></el-input-number>
        </el-form-item>

        <el-form-item label="抢券开始时间">
          <el-date-picker v-model="form.start_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="抢券结束时间">
          <el-date-picker v-model="form.end_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="优惠券生效时间">
          <el-date-picker v-model="form.effective_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="优惠券失效时间">
          <el-date-picker v-model="form.invalid_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="createDiscount()">确 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="name"
                       label="优惠券名称"
                       width="180">
      </el-table-column>
      <el-table-column prop="rate"
                       label="优惠折扣"
                       width="180">
      </el-table-column>
      <el-table-column prop="number"
                       label="数量"
                       width="180">
      </el-table-column>
      <el-table-column prop="surplus"
                       label="剩余数量"
                       width="180">
      </el-table-column>
      <el-table-column prop="start_time"
                       label="抢券开始时间">
      </el-table-column>
      <el-table-column prop="end_time"
                       label="抢券开始时间">
      </el-table-column>
      <el-table-column prop="effective_time"
                       label="优惠券生效时间">
      </el-table-column>
      <el-table-column prop="invalid_time"
                       label="优惠券失效时间">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { CreateDiscount, GetDiscount } from '@/api/discount.js'
export default {
  data () {
    return {
      centerDialogVisible: false,
      form: {},
      tableData: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      GetDiscount().then(res => {
        console.log(res);
        this.tableData = res.data
      }).catch(err => {
        console.log(err);
      })
    },
    showCreateFrom () {
      this.form = {};
      this.centerDialogVisible = true;
    },
    createDiscount () {

      if (new Date(this.form.start_time).getTime() < new Date().getTime()) {
        this.$message({
          message: '开始时间不可在今天之前, 请重新选择',
          type: 'warning'
        });
        return
      }

      if (!this.isTimeAfter(this.form.start_time, this.form.end_time)) {
        this.$message({
          message: '开始时间不可在结束时间之后, 请重新选择',
          type: 'warning'
        });
        return
      }

      if (!this.isTimeAfter(this.form.effective_time, this.form.invalid_time)) {
        this.$message({
          message: '开始时间不可在结束时间之后, 请重新选择',
          type: 'warning'
        });
        return
      }
      this.form.restaurant_id = 1
      console.log(this.form)
      CreateDiscount(this.form).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
      this.centerDialogVisible = false;
    },
    isTimeAfter (start, end) {
      if (new Date(start).getTime() > new Date(end).getTime()) {
        return false;
      }
      return true;
    }
  }
}
</script>

<style>
</style>